<template>
  <div class="bill">
    <div class="header">
      <top-bar :barObj="barObj"/>
      <div class="classify" @click="classify">
        分类
        <i class="iconfont icon-xiangxia1"></i>
      </div>
    </div>
    <div class="content">
      <div class="dateTime">
        <div class="item" @click="openPicker1">
          <i class="iconfont icon-riqi" style="font-size:18px;"></i>
          {{dateTime1}}
        </div>
        <div v-show="dateTime1" class="item" @click="openPicker2">
          <i class="iconfont icon-riqi" style="font-size:18px;"></i>
          {{dateTime2}}
        </div>
      </div>
      <div class="title">
        <div class="item">支出 {{checkListData.OutCount}} 章鱼丸</div>
        <div class="item">收入 {{checkListData.InCount}} 章鱼丸</div>
        <!-- <div class="item item3" @click="openPicker">
          <i class="iconfont icon-riqi" style="font-size:18px;"></i>
        </div>-->
      </div>
      <div ref="wrapper" :style="{'-webkit-overflow-scrolling': scrollMode}" class="wrapper">
        <v-loadmore
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          :auto-fill="false"
          ref="loadmore"
        >
          <ul>
            <li v-for="(item,index) in checkListDataList" :key="index">
              <div class="icon">
                <img src="./img/zhangdan.png" alt>
              </div>
              <div class="txt">
                <div class="top" v-show="classifyCurrent==1">
                  <span v-if="item.value1 == userID">{{item.value3}} 向 {{item.value4}}转出</span>
                  <span v-else>{{item.value3}} 向 {{item.value4}}转入</span>
                  
                  <span class="_money" v-if="item.value5>0 && item.value2 == userID">
                    <span v-if="item.value2 == userID">+</span>
                    {{item.value5}}
                  </span>
                  <span class="money" v-else>
                    <span>-</span>
                    {{item.value5}}
                  </span>
                </div>
                <div class="top" v-show="classifyCurrent==2">
                  <span>{{item.value3}}</span>
                  <span class="money" style="flex: 0 1 3.7rem">{{item.value1}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==3">
                  <span>签到</span>
                  <span class="_money" v-if="item.value1>0">+{{item.value1}}</span>
                  <span class="money" v-else>{{item.value1}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==4">
                  <span style="flex: 0 1 4.5rem">{{item.value3}}</span>
                  <span class="_money" v-if="item.value2">+{{item.value2}}</span>
                  <span class="money" v-else>{{item.value2}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==5">
                  <span>{{item.value1}}</span>
                  <span class="_money" v-if="item.value2>0">+{{item.value2}}</span>
                  <span class="money" v-else>{{item.value2}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==6">
                  <span>{{item.value4}}</span>
                  <span class="_money" v-if="item.value3>0">+{{item.value3}}</span>
                  <span class="money" v-else>{{item.value3}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==7">
                  <span>{{item.value2}}</span>
                  <span class="money" v-if="item.value5==0">- {{parseInt(item.value3).toFixed(2)}}</span>
                  <span class="_money" v-if="item.value5==1">+ {{parseInt(item.value3).toFixed(2)}}</span>
                  <span class="_money" v-if="item.value5==2">+ {{parseInt(item.value3).toFixed(2)}}</span>
                </div>
                <div class="top" v-show="classifyCurrent==8">
                  <span style="flex: 0 1 4rem">{{item.value5}}送{{item.value6}}{{item.value3}}</span>
                  <span class="_money">
                    <span v-if="item.value6 == NickName">+</span>
                    <span v-else>-</span>
                    {{parseInt(item.value2).toFixed(2)}}
                  </span>
                </div>
                <div class="top" v-show="classifyCurrent==9">
                  <template v-if="item.value8==1">
                    <span v-if="item.value1 == userID">{{item.value3}} 向 {{item.value4}}转出</span>
                    <span v-else>{{item.value3}} 向 {{item.value4}}转入</span>
                    <span class="_money" v-if="item.value5>0 && item.value2 == userID">
                      <span v-if="item.value2 == userID">+</span>
                      {{item.value5}}
                    </span>
                    <span class="money" v-else>
                      <span>-</span>
                      {{item.value5}}
                    </span>
                  </template>
                  <template v-if="item.value8==2">
                    <span>{{item.value3}}</span>
                    <span class="money" style="flex: 0 1 3.7rem">{{item.value1}}</span>
                  </template>
                  <template v-if="item.value8==3">
                    <span>签到</span>
                    <span class="_money" v-if="item.value1>0">+{{item.value1}}</span>
                    <span class="money" v-else>{{item.value1}}</span>
                  </template>
                  <template v-if="item.value8==4">
                    <span style="flex: 0 1 4.5rem">{{item.value3}}</span>
                    <span class="_money" v-if="item.value2">+{{item.value2}}</span>
                    <span class="money" v-else>{{item.value2}}</span>
                  </template>
                  <template v-if="item.value8==5">
                    <span>{{item.value1}}</span>
                    <span class="_money" v-if="item.value2>0">+{{item.value2}}</span>
                    <span class="money" v-else>{{item.value2}}</span>
                  </template>
                  <template v-if="item.value8==6">
                    <span>{{item.value4}}</span>
                    <span class="_money" v-if="item.value3>0">+{{item.value3}}</span>
                    <span class="money" v-else>{{item.value3}}</span>
                  </template>
                  <template v-if="item.value8==7">
                    <span>{{item.value2}}</span>
                    <span class="money" v-if="item.value5==0">- {{parseInt(item.value3).toFixed(2)}}</span>
                    <span
                      class="_money"
                      v-if="item.value5==1"
                    >+ {{parseInt(item.value3).toFixed(2)}}</span>
                    <span
                      class="_money"
                      v-if="item.value5==2"
                    >+ {{parseInt(item.value3).toFixed(2)}}</span>
                  </template>
                  <template v-if="item.value8==8">
                    <span style="flex: 0 1 4rem">{{item.value5}}送{{item.value6}}{{item.value3}}</span>
                    <span class="_money">+{{parseInt(item.value2).toFixed(2)}}</span>
                  </template>
                  <template v-if="item.value8==10">
                    <span style="flex: 0 1 4rem">{{item.value2}} {{parseInt(item.value3)}}</span>
                    <span class="_money">-{{parseInt(item.value4)}}</span>
                  </template>
                </div>
                <!-- value2 -->
                <div class="top" v-show="classifyCurrent==10">
                  <span>{{item.value2}} &#x3000;{{parseInt(item.value3) }}hiw</span>
                  <span class="money">-{{parseInt(item.value4)}}</span>
                  <!-- <span class="money" v-else>{{item.value5}}</span> -->
                </div>
                <div class="time">{{item.value7}}</div>
              </div>
            </li>
          </ul>
        </v-loadmore>
      </div>
    </div>
    <div class="classifyBox" v-if="isShowMask" @click="isShowMask=false">
      <div class="sort" @click.stop>
        <div class="sort_xs">
          分类
          <i class="iconfont icon-xiangshang"></i>
        </div>
        <ul>
          <li v-for="(item,index) in arr" :key="index" @click="classifyList(item)">
            <img v-if="item.id == classifyCurrent" :src="item.img" alt>
            <img v-else :src="item.img1" alt>
            <span :class="{'span_active' : item.id == classifyCurrent }">{{ item.txt }}</span>
          </li>
        </ul>
      </div>
    </div>
    <mt-datetime-picker
      type="datetime"
      ref="picker1"
      year-format="{value}"
      month-format="{value}"
      date-format="{value}"
      @confirm="handleConfirm1"
      :endDate="startDate"
    ></mt-datetime-picker>
    <mt-datetime-picker
      type="datetime"
      ref="picker2"
      year-format="{value}"
      month-format="{value}"
      date-format="{value}"
      @confirm="handleConfirm2"
      :endDate="startDate"
    ></mt-datetime-picker>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import moment from "moment"; // 格式化时间
import { checkList } from "../../api";
import { Toast } from "mint-ui";
import { getGuid } from "../../utils/index";
import { Loadmore } from "mint-ui";

export default {
  name: "bill",
  components: {
    topBar,
    "v-loadmore": Loadmore
  },
  data() {
    return {
      userID: localStorage.zyUserId,
      NickName: "",
      barObj: {
        isBack: true,
        backVal: "我",
        title: "账单",
        isIcon: true
      },
      //（1：转账记录；2：话费记录；3：签到记录；4：奖励记录；
      // 5：兑换ps记录； 6：游戏记录；7：红包记录；8：礼物记录 9:全部 10：基金）
      arr: [
        {
          txt: "转账",
          id: "1",
          img: require("./img/zz.png"),
          img1: require("./img/zz1.png")
        },
        {
          txt: "话费",
          id: "2",
          img: require("./img/hf.png"),
          img1: require("./img/hf1.png")
        },
        {
          txt: "签到",
          id: "3",
          img: require("./img/qiandao.png"),
          img1: require("./img/qiaodao1.png")
        },
        {
          txt: "奖励",
          id: "4",
          img: require("./img/jiangli.png"),
          img1: require("./img/jiangli1.png")
        },
        {
          txt: "兑换PS",
          id: "5",
          img: require("./img/dh.png"),
          img1: require("./img/dh1.png")
        },
        {
          txt: "游戏记录",
          id: "6",
          img: require("./img/jl.png"),
          img1: require("./img/jl1.png")
        },
        {
          txt: "红包",
          id: "7",
          img: require("./img/hb.png"),
          img1: require("./img/hb1.png")
        },
        {
          txt: "礼物",
          id: "8",
          img: require("./img/liwu.png"),
          img1: require("./img/liwu1.png")
        },
        {
          txt: "基金",
          id: "10",
          img: require("./img/Fund benefits selected.png"),
          img1: require("./img/Fund benefits not selected.png.png")
        },
        {
          txt: "全部",
          id: "9",
          img: require("./img/qb.png"),
          img1: require("./img/qb1.png")
        }
      ],
      isShowMask: false,
      classifyCurrent: 9,
      dateTime1: "",
      dateTime2: "",
      startDate: new Date(),
      PageNo: "0", //页号（第一页为0）
      PageSize: "6",
      checkListData: {},
      checkListDataList: [],
      allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: "touch" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
    };
  },
  mounted() {
    this.getCheckList(this.classifyCurrent, this.pageNo);
    this.NickName = JSON.parse(localStorage.zyUserData).NickName;
  },
  methods: {
    // 上拉加载
    loadBottom: function() {
      this.more(this.currentItem); // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    more() {
      this.PageNo = parseInt(this.PageNo) + 1;
      this.allLoaded = false;
      this.getCheckList(this.classifyCurrent, this.PageNo);
    },
    getCheckList(MC, PageNo) {
      let id = localStorage.zyUserId;
      checkList({
        ID: id,
        LoginMachine: getGuid(),
        MC: MC,
        PageNo: PageNo,
        PageSize: this.PageSize,
        StartTime: this.dateTime1,
        EndTime: this.dateTime2
      }).then(res => {
        let data = res.data;
        if (data.Success) {
          if (data.EntityList[0].list.length == "0") {
            // this.checkListDataList = [];
            Toast({
              message: "暂无更多数据",
              duration: 2000
            });
          }
          this.checkListData = data.EntityList[0];
          data.EntityList[0].list.forEach(item => {
            this.checkListDataList.push(item);
          });
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    },
    classify() {
      this.isShowMask = true;
    },
    classifyList(item) {
      this.checkListDataList = [];
      this.classifyCurrent = item.id;
      this.PageNo = 0;
      this.getCheckList(item.id, this.PageNo);
      setTimeout(() => {
        this.isShowMask = false;
      }, 300);
    },
    openPicker1() {
      this.$refs.picker1.open();
    },
    openPicker2() {
      this.$refs.picker2.open();
    },
    handleConfirm1(data) {
      let date = moment(data).format("YYYY-MM-DD HH:mm:ss");
      this.dateTime1 = date;
      console.log(this.dateTime1);
    },
    handleConfirm2(data) {
      let date = moment(data).format("YYYY-MM-DD HH:mm:ss");
      this.dateTime2 = date;
      this.checkListDataList = [];
      this.getCheckList(this.classifyCurrent, this.PageNo);
    }
  }
};
</script>
<style lang="stylus" scoped>
.bill {
  width: 7.5rem;
  height: 100%;
  margin: 0 auto;

  .header {
    width: 100%;
    height: 4.62rem;
    background: url('./img/bell_btm.png');
    background-size: 100% 100%;
    padding-top: 0.54rem;
    box-sizing: border-box;
    position: relative;

    .classify {
      color: #fff;
      font-size: 14px;
      position: absolute;
      right: 0.5rem;
      top: 0.56rem;

      i {
        font-size: 14px;
      }
    }
  }

  .content {
    width: 7.04rem;
    margin: 0 auto;
    position: relative;
    top: -150px;

    .dateTime {
      color: #fff;
      font-size: 13px;
      font-family: 'HYg1gj';
      margin-left: 0.2rem;
      line-height: 30px;
      display: flex;

      .item {
        flex: 1;
        text-align: center;

        i {
          position: relative;
          top: 2px;
        }
      }
    }

    .title {
      display: flex;
      font-size: 14px;
      font-family: 'HYg1gj';
      color: rgba(255, 255, 255, 1);
      margin: 10px 0;

      .item {
        flex: 1;
        text-align: center;
      }

      .item3 {
        width: 50px;
        flex: 0 1 50px;
      }
    }

    .wrapper {
      background: #fff;
      border-radius: 10px;
      color: rgba(78, 80, 99, 1);
      margin-top: 8px;
      padding: 10px;
      box-sizing: border-box;
      overflow: scroll;
      height: 75vh;

      ul {
        width: 100%;

        li {
          height: 1.2rem;
          display: flex;
          margin-top: 0.3rem;

          .icon {
            width: 0.73rem;
            height: 0.73rem;
            flex: 0 1 0.73rem;
            margin-right: 10px;
            margin-top: 0.23rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .txt {
            flex: 1;
            border-bottom: 1px solid rgba(137, 137, 137, 0.8);

            .top {
              display: flex;
              line-height: 0.7rem;

              span {
                flex: 1;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .money {
                text-align: right;
                font-size: 16px;
              }

              ._money {
                color: rgba(255, 114, 0, 1);
                font-size: 16px;
                text-align: right;
              }
            }

            .time {
              color: rgba(145, 145, 145, 1);
              font-size: 10px;
            }
          }
        }
      }
    }
  }

  .classifyBox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;

    .sort {
      width: 7.04rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);

      .sort_xs {
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;

        i {
          font-size: 14px;
        }
      }

      ul {
        margin-top: 0.6rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */

        li {
          width: 1.88rem;
          height: 1.87rem;
          margin: 10px;
          display: flex;
          flex-direction: column;
          align-items: center; /* 垂直居中 */
          justify-content: center; /* 水平居中 */

          img {
            width: 0.53rem;
            height: 0.53rem;
            margin-bottom: 10px;
          }

          span {
            font-size: 15px;
          }

          .span_active {
            color: #d3af83;
          }
        }
      }
    }
  }
}
</style>


